<template>
  <div class="home">
    <van-search placeholder="请输入搜索关键词" v-model="value" background="#FF4444" shape="round"/>
    <div>
      <van-row style="background-color: #FF4444;margin-top: -2px">
        <van-col span="4" style="text-align:center"><van-tag type="danger" >热搜</van-tag></van-col>
        <van-col span="5"><van-tag round class="home-tag">吹风机</van-tag></van-col>
        <van-col span="5"><van-tag round class="home-tag">饮水机</van-tag></van-col>
        <van-col span="5"><van-tag round class="home-tag">连衣裙</van-tag></van-col>
        <van-col span="5" style="margin-bottom: 10px;"><van-tag round class="home-tag">笔记本</van-tag></van-col>
      </van-row>
    </div>
    <van-swipe class="home-swipe" :autoplay="3000">
      <van-swipe-item class="home-swipe" v-for="(image, index) in images" :key="index">
        <img :src="image" />
      </van-swipe-item>
    </van-swipe>
    <van-grid>
      <van-grid-item
        v-for="value in 4"
        :key="value"
        icon="photo-o"
        text="文字"
      />
    </van-grid>
    <BottomTabbar></BottomTabbar>
  </div>
</template>

<script>
  import { Swipe, SwipeItem, Search, Tag, Row, Col,Grid, GridItem  } from 'vant';
  import BottomTabbar from '../layout/bottom-tabbar'
  export default {
    components: {
      BottomTabbar,
      [Swipe.name]: Swipe,
      [SwipeItem.name]: SwipeItem,
      [Search.name]: Search,
      [Tag.name]: Tag,
      [Row.name]: Row,
      [Col.name]: Col,
      [Grid.name]: Col,
      [GridItem.name]: Col
    },
    data() {
      return {
        images: [
          'https://img.yzcdn.cn/vant/apple-1.jpg',
          'https://img.yzcdn.cn/vant/apple-2.jpg'
        ]
      }
    }
  }
</script>

<style lang="less">
  .home {
    font-size: 16px;
    padding-bottom: 50px;

    &-swipe {
      img {
        width: 100%;
        height: 180px;
        display: block;
      }
    }

    &-tag {
      font-size: 12px;
    }
  }
</style>
